using styles - the code

1 <HTML>

2 <HEAD>

3 <TITLE>using styles</TITLE>

4

5 <LINK REL="stylesheet" TYPE="text/css" HREF="styles_sample.css" TITLE="styles sample">



6

7 <STYLE TYPE="text/css">



8

9 H1          {font-family: Arial, Helvetica, sans-serif;



10              font-size: 10pt;

11              color: red;



12             }

13

14 TD H2        {font-family: Arial, Helvetica, sans-serif;

15              font-weight: 700;



16              font-size: 16pt;

17              color: #000000;

18             }

19

20 .disclaimer {font-family: Times, serif;

21              font-size: 8pt;

22             }

23

24 </STYLE>

25 </HEAD>

26

27 <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#990066" VLINK="#006600">

28

29 <P>

30 <B>Get fonts, glorious fonts</B><BR>

31 If you've been developing web sites for awhile, you've probably used the <CODE>FACE</CODE> attribute of the <CODE>FONT</CODE> tag to assign a specific font (or series of fonts) to your text. Unfortunately, determining a font's size is much more difficult because the <CODE>SIZE</CODE> attribute is relative to the user's font settings in the browser preferences. With style sheets, you can define a font family or series of families--plus point size, weight, decoration, color, and other attributes--for a specific tag or an arbitrary section of text.

32

33 <P>

34 <B>Save time and typing</B><BR>

35 Have you ever wanted to use a different font for tables of data? Whether you opt for <CODE>CODE</CODE> or <CODE>FONT FACE="fontName"</CODE>, you can't apply your tag to the whole table at once. Instead, you have to wrap it around the contents of each and every <CODE>TD</CODE>. With styles, you can assign a font to the <CODE>TD</CODE> tag once, and the contents of every table cell will be affected.

36

37 <P>

38 <TABLE WIDTH=50% BORDER=1 CELLPADDING=5>

39 <TR>

40 <TD>Data entry 1</TD>

41 <TD>Data entry 2</TD>

42 </TR>

43

44 <TR>

45 <TD>Data entry 3</TD>

46 <TD>Data entry 4</TD>

47 </TR>

48 </TABLE>

49

50 <P>

51 You might still be willing to type all those <CODE>FONT FACE</CODE> tags in your table, but what if you have a table on every page? What if you go to all the trouble of assigning <CODE>FONT FACE="Comic Sans MS"</CODE> to all the bold type on your site, and then the art director decides she would rather use Arial? With styles, you can keep a master stylesheet and link it to each of your pages. Then, whenever you add to, subtract from, or adjust your styles, all the pages of your site are automatically updated. You can also override the master styles--or extend them--for a particular page if you need to.

52

53 <P>

54 <B>Gain control</B><BR>

55 Now <EM>you</EM> can decide how big--and what color--<CODE>H1</CODE> headers are.

56

57 <H1>Believe it or not, this is an H1 header</H1>

58

59 <P>

60 You can decide that you want <CODE>TD</CODE>s to be in a 9 pt gray monospaced font, but an <CODE>H2</CODE> inside a <CODE>TD</CODE> to be 18pt black sans-serif.

61

62 <P>

63 <TABLE WIDTH=50% BORDER=1 CELLPADDING=5>

64 <TR>

65 <TD COLSPAN=2><H2>This is an H2 header in a table cell.</H2></TD>

66 </TR>

67

68 <TR>

69 <TD>TD 1</TD>

70 <TD>TD 2</TD>

71 </TR>

72

73 <TR>

74 <TD>TD 3</TD>

75 <TD>TD 4</TD>

76 </TR>

77 </TABLE>

78

79 <P>

80 You can decide that all disclaimers on your site will be in 8pt Times.

81

82 <P CLASS="DISCLAIMER">

83 This print is fine enough to be in a luxury vehicle lease commercial.



84

85 <P>

86 You can say that henceforth a <CODE>BLOCKQUOTE</CODE> will be indented 75 pixels on both the left and right, eliminating the need for several nested <CODE>BLOCKQUOTE</CODE>s to achieve a narrow column of text.

87

88 <BLOCKQUOTE>

89 (Or you could set <CODE>P</CODE>, <CODE>BODY</CODE>, or <CODE>.indentedText</CODE> to have padding of 75 pixels, and <CODE>BLOCKQUOTE</CODE>s could indent further from that.)

90 </BLOCKQUOTE>

91

92 <P>

93 <B>Start stylin'</B><BR>

94 Have a look at <A HREF="styles_code.html">the code that created this page</A> to see what style syntax looks like, or learn how to <A HREF="styles_dw.html">create styles easily with Dreamweaver</A>. Either way, you'll be stylin'.

95

96 <P>

97 <HR ALIGN="left" WIDTH=25%>

98 <P CLASS="asterisk">

99 * Note: This sample only works in Netscape Communicator 4.0 and Internet Explorer 3.0 and later.

100

101 </BODY>

102 </HTML>

1		<HTML>
2		<HEAD>
3		<TITLE>using styles</TITLE>
4
5		<LINK REL="stylesheet" TYPE="text/css" HREF="styles_sample.css" TITLE="styles sample">
		<!-- This links the current page with an external style sheet. When that style sheet is updated, all the pages linked to it will reflect the changes. To see what's in the linked style sheet, click on the reference to it. -->
6
7		<STYLE TYPE="text/css">
		<!-- The styles following this tag are specific to the document. If there is a style with the same selector (B, for example, or .disclaimer) in the linked style sheet, the definition in the document will override the definition in the linked style sheet. All style definitions are enclosed in curly braces, but individual attributes need not be listed on their own lines. -->
8
9		H1 {font-family: Arial, Helvetica, sans-serif;
		<!-- It's good practice to list a series of font preferences, ending with a generic font family (serif, sans-serif, cursive, fantasy, or monospace), in case your ideal font is not installed on the user's machine. -->
10		font-size: 10pt;
11		color: red;
		<!-- Color can be expressed as a hexadecimal, an rgb value, or a browser-recognized color word -- #FF0000, rgb(255,0,0) or red, respectively. -->
12		}
13
14		TD H2 {font-family: Arial, Helvetica, sans-serif;
15		font-weight: 700;
		<!-- Font weight can be expressed as normal (the default value), bold, bolder, or lighter, or as 100, 200, 300, 400, 500, 600, 700, 800, or 900. Normal and 400 are equivalent; so are 700 and bold. -->
16		font-size: 16pt;
17		color: #000000;
18		}
19
20		.disclaimer {font-family: Times, serif;
21		font-size: 8pt;
22		}
23
24		</STYLE>
25		</HEAD>
26
27		<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#990066" VLINK="#006600">
28
29		<P>
30		<B>Get fonts, glorious fonts</B><BR>
31		If you've been developing web sites for awhile, you've probably used the <CODE>FACE</CODE> attribute of the <CODE>FONT</CODE> tag to assign a specific font (or series of fonts) to your text. Unfortunately, determining a font's size is much more difficult because the <CODE>SIZE</CODE> attribute is relative to the user's font settings in the browser preferences. With style sheets, you can define a font family or series of families--plus point size, weight, decoration, color, and other attributes--for a specific tag or an arbitrary section of text.
32
33		<P>
34		<B>Save time and typing</B><BR>
35		Have you ever wanted to use a different font for tables of data? Whether you opt for <CODE>CODE</CODE> or <CODE>FONT FACE="fontName"</CODE>, you can't apply your tag to the whole table at once. Instead, you have to wrap it around the contents of each and every <CODE>TD</CODE>. With styles, you can assign a font to the <CODE>TD</CODE> tag once, and the contents of every table cell will be affected.
36
37		<P>
38		<TABLE WIDTH=50% BORDER=1 CELLPADDING=5>
39		<TR>
40		<TD>Data entry 1</TD>
41		<TD>Data entry 2</TD>
42		</TR>
43
44		<TR>
45		<TD>Data entry 3</TD>
46		<TD>Data entry 4</TD>
47		</TR>
48		</TABLE>
49
50		<P>
51		You might still be willing to type all those <CODE>FONT FACE</CODE> tags in your table, but what if you have a table on every page? What if you go to all the trouble of assigning <CODE>FONT FACE="Comic Sans MS"</CODE> to all the bold type on your site, and then the art director decides she would rather use Arial? With styles, you can keep a master stylesheet and link it to each of your pages. Then, whenever you add to, subtract from, or adjust your styles, all the pages of your site are automatically updated. You can also override the master styles--or extend them--for a particular page if you need to.
52
53		<P>
54		<B>Gain control</B><BR>
55		Now <EM>you</EM> can decide how big--and what color--<CODE>H1</CODE> headers are.
56
57		<H1>Believe it or not, this is an H1 header</H1>
58
59		<P>
60		You can decide that you want <CODE>TD</CODE>s to be in a 9 pt gray monospaced font, but an <CODE>H2</CODE> inside a <CODE>TD</CODE> to be 18pt black sans-serif.
61
62		<P>
63		<TABLE WIDTH=50% BORDER=1 CELLPADDING=5>
64		<TR>
65		<TD COLSPAN=2><H2>This is an H2 header in a table cell.</H2></TD>
66		</TR>
67
68		<TR>
69		<TD>TD 1</TD>
70		<TD>TD 2</TD>
71		</TR>
72
73		<TR>
74		<TD>TD 3</TD>
75		<TD>TD 4</TD>
76		</TR>
77		</TABLE>
78
79		<P>
80		You can decide that all disclaimers on your site will be in 8pt Times.
81
82		<P CLASS="DISCLAIMER">
83		This print is fine enough to be in a luxury vehicle lease commercial.
		<!-- Style names are case-insensitive, so it doesn't matter that the ".disclaimer" style defined above is referenced with <P CLASS="DISCLAIMER">. You should note, however, that while CLASS style names always begin with a period in the definition, they are referenced without the period. -->
84
85		<P>
86		You can say that henceforth a <CODE>BLOCKQUOTE</CODE> will be indented 75 pixels on both the left and right, eliminating the need for several nested <CODE>BLOCKQUOTE</CODE>s to achieve a narrow column of text.
87
88		<BLOCKQUOTE>
89		(Or you could set <CODE>P</CODE>, <CODE>BODY</CODE>, or <CODE>.indentedText</CODE> to have padding of 75 pixels, and <CODE>BLOCKQUOTE</CODE>s could indent further from that.)
90		</BLOCKQUOTE>
91
92		<P>
93		<B>Start stylin'</B><BR>
94		Have a look at <A HREF="styles_code.html">the code that created this page</A> to see what style syntax looks like, or learn how to <A HREF="styles_dw.html">create styles easily with Dreamweaver</A>. Either way, you'll be stylin'.
95
96		<P>
97		<HR ALIGN="left" WIDTH=25%>
98		<P CLASS="asterisk">
99		* Note: This sample only works in Netscape Communicator 4.0 and Internet Explorer 3.0 and later.
100
101		</BODY>
102		</HTML>